<template>
  <div>
    <common-view ref="commonView" :SearchSet="searchSet" :SearchForm="searchForm" :SearchData="searchData"
      :TableSet="tableSet" :Columns="columns" :DialogSet="dialogSet" :DialogFormData="dialogFormData"
      :DialogForm="dialogForm" :RequestController="requestController" :DataList="dataList" :pageSearch="pageSearch"
      @handleQueryCallBack="handleQueryCallBack" @addCallBack="addCallBack" @updateCallBack="updateCallBack"
      @deleteCallBack="deleteCallBack">
    </common-view>
    <el-dialog title="配置喷头" :visible="dialogVisible" width="70%" @close="dialogVisible=false" center>
      <div class="checkDiv">
        <el-row>
          <el-col :lg="5" :xs="24" align="middle">
            <h3>左侧喷头 </h3>
            <el-checkbox-group v-model="checkList">
              <div v-for="sprinkler in sprinklerLeftList" :key="sprinkler.label">
                <el-button size="mini" @click="updateSkPlace(sprinkler.value,-1,sprinklerLeftList)" circle
                  style="margin-right:5px"><i class="el-icon-arrow-left"></i></el-button>
                <el-checkbox :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border
                  class="checkbox" style="width:120px">
                  <span :id="sprinkler.value" class="checkboxClassDefault">
                    {{sprinkler.label+'('+sprinkler.position+')'}}</span>
                </el-checkbox>
                <el-button circle size="mini" @click="updateSkPlace(sprinkler.value,1,sprinklerLeftList)"
                  style="margin-left:5px"><i class="el-icon-arrow-right"></i></el-button>
              </div>
            </el-checkbox-group>
          </el-col>
          <el-col :lg="14" :xs="24" align="middle">
            <el-row>
              <h3>淋雨喷头 </h3>
              <el-checkbox-group v-model="checkList">
                <span style="padding:10px">
                  <el-checkbox v-for="sprinkler in sprinklerBigList" :key="sprinkler.label" :label="sprinkler.value"
                    @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox">
                    <span :id="sprinkler.value" class="checkboxClassDefault"> {{sprinkler.label}}</span>
                  </el-checkbox>
                </span>
              </el-checkbox-group>
            </el-row>
            <el-row>
              <h3>浸雨喷头</h3>
              <el-checkbox-group v-model="checkList">
                <span style="padding:10px">
                  <el-checkbox v-for="sprinkler in sprinklersmallList" :key="sprinkler.label" :label="sprinkler.value"
                    @change="checked=>checkRow(checked, sprinkler.value)" border class="checkbox">
                    <span :id="sprinkler.value" class="checkboxClassDefault"> {{sprinkler.label}}</span>
                  </el-checkbox>
                </span>
              </el-checkbox-group>
            </el-row>
          </el-col>
          <el-col :lg="5" :xs="24" align="middle">
            <h3>右侧喷头 </h3>
            <el-checkbox-group v-model="checkList">
              <div v-for="sprinkler in sprinklerRightList" :key="sprinkler.label">
                <el-button size="mini" @click="updateSkPlace(sprinkler.value,-1,sprinklerRightList)" circle
                  style="margin-right:5px"><i class="el-icon-arrow-left"></i></el-button>
                <el-checkbox :label="sprinkler.value" @change="checked=>checkRow(checked, sprinkler.value)" border
                  class="checkbox" style="width:120px">
                  <span :id="sprinkler.value" class="checkboxClassDefault">
                    {{sprinkler.label+'('+sprinkler.position+')'}}</span>
                </el-checkbox>
                <el-button circle size="mini" @click="updateSkPlace(sprinkler.value,1,sprinklerRightList)"
                  style="margin-left:5px"><i class="el-icon-arrow-right"></i></el-button>
              </div>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import CommonView from "@/components/common/CommonView.vue";

export default {
  components: {
    CommonView,
  },
  data() {
    return {
      //页面组件配置
      //===================================================//
      //搜索框按钮
      //搜索框及搜索按钮是否展示
      searchSet: {
        searchButtenShow: true,
      },
      //搜索框配置及数据
      searchData: {
        g_name: "",
      },
      searchForm: [
        {
          type: "Input",
          label: "飞机名称",
          prop: "p_name",
          width: "200px",
          placeholder: "飞机名称...",
          enternative: this.handleQuery, //按下enter执行的函数
        },
      ],
      //表格相关配置
      tableSet: {
        selection: true, //是否显示多选框
        showKey: true, //显示索引列
        idColum: "p_id", //（id）主键列名称
      },
      //表格表头数据
      //Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
      columns: Object.freeze([
        {
          sortable: true,
          attrs: {
            prop: "p_name",
            label: "飞机名称",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        {
          sortable: true,
          attrs: {
            prop: "p_memo",
            label: "备注",
            // width: "140",
            align: "center",
            // "show-overflow-tooltip": true,
          },
        },
        {
          slot: "handle",
          attrs: {
            label: "操作",
            formatter: () => {
            },
            //不设置width 则自适应
            align: "center",
          },
          buttens: [
            {
              name: "配置喷头",
              icon: "",
              handle: (row) => {
                this.openDialog(row);
              },
            },
          ],
        },
      ]),
      //新增编辑弹出框相关配置
      dialogSet: {
        title: "飞机",
        isEdit: false,
        dialogVisible: false,
      },
      //新增编辑相关信息
      dialogFormData: { p_name: "", p_memo: "" },
      //新增编辑form
      dialogForm: {
        labelWidth: "100px",
        inline: false,
        labelPosition: "right",
        size: "small",
        formItem: [
          {
            type: "text",
            label: "飞机名称",
            width: "200px",
            prop: "p_name",
            size: "small",
            isDisabled: false,
            rules: [
              { required: true, message: "请输入飞机名称", trigger: "blur" },
              {
                min: 2,
                max: 15,
                message: "长度在 2 到 15 个字符",
                trigger: "blur",
              },
            ],
          },
          {
            type: "textarea",
            label: "备注",
            width: "200px",
            prop: "p_memo",
            rows: 10,
            size: "small",
            isDisabled: false,
            rules: [],
          },
        ],
      },
      downloadLoading: false,
      dataList: [],

      //页面逻辑参数等
      //=======================================================//
      //选中的行
      requestController: "plane",
      pageSearch: false, //是否分页
      dialogVisible: false,
      checkList: [],
      sprinklerBigList: [],
      sprinklersmallList: [],
      sprinklerLeftList: [],
      sprinklerRightList: [],
      spanClass: false,
      pId: 0,
    };
  },
  mounted: function () {
    this.getSprinkerList();
  },
  methods: {
    updateSkPlace(skId, position, skList) {
      this.baseRequest
        .Post(
          "CleanPlane/UpdateSkPosition",
          {},
          { pId: this.pId, skId: skId, position: position }
        )
        .then((res) => {
          var message = "移动成功";
          if (position > 0) {
            message = "右移成功";
          } else {
            message = "左移成功";
          }
          this.$message({
            message: message,
            type: "success",
          });
          skList.forEach((item) => {
            if (item.value == skId) {
              item.position = item.position + position;
            }
          });
        });
    },
    checkRow(checked, value) {
      console.log(checked, value);
      console.log(this.checkList);
      if (checked) {
        document.getElementById(value).className = "checkboxClass";
      } else {
        document.getElementById(value).className = "checkboxClassDefault";
      }
    },
    getSprinkerList() {
      this.baseRequest.Post("Sprinkler/List", {}).then((res) => {
        res.bodyList.forEach((item) => {
          var option = { label: "", value: "", sk_type: "", position: 0 };
          option.label = item.sk_number;
          option.value = item.sk_id;

          if (item.sk_type == "levelLeft") {
            this.sprinklerLeftList.push(option);
          }
          if (item.sk_type == "levelRight") {
            this.sprinklerRightList.push(option);
          }
          if (item.sk_type == "verticalSmall") {
            this.sprinklersmallList.push(option);
          }
          if (item.sk_type == "verticalBig") {
            this.sprinklerBigList.push(option);
          }
        });
      });
    },
    update() {
      this.baseRequest
        .Post(
          "CleanPlane/Update",
          {},
          { pId: this.pId, skIdList: this.checkList.join(",") }
        )
        .then((res) => {
          this.dialogVisible = false;
          this.$message({
            message: "保存成功",
            type: "success",
          });
        });
    },
    openDialog(row) {
      //样式设为默认
      this.checkList.forEach((item) => {
        document.getElementById(item).className = "checkboxClassDefault";
      });
      //重置选中checkbox
      this.checkList = [];
      this.pId = row.p_id;
      this.baseRequest
        .Post("CleanPlane/List", {}, { pId: row.p_id })
        .then((res) => {
          res.bodyList.forEach((item) => {
            if (item.c_state == 1) {
              this.checkList.push(item.sk_id);
              //给选中的喷头添加样式
              document.getElementById(item.sk_id).className = "checkboxClass";
            }
            this.sprinklerLeftList
              .concat(this.sprinklerRightList)
              .forEach((itemp) => {
                if (itemp.value == item.sk_id) {
                  itemp.position = item.sk_level_space;
                }
              });
          });
        });
      this.dialogVisible = true;
    },
    handleQuery() {
      this.$refs.commonView.handleQuery();
    },
    //修正返回表格list数据(访问list返回成功回调)
    handleQueryCallBack(res) {
      this.dataList = res.bodyList;
    },
    ///新增回调
    addCallBack(res) {},
    //更新回调
    updateCallBack(res) {},
    //删除回调
    deleteCallBack(res) {},
    Export() {
      this.downloadLoading = true;
      // this.downloadLoading=false;
    },
  },
};
</script>
<style lang="scss" >
.el-form-item {
  margin-bottom: 0px;
}
.checkbox {
  margin-top: 10px;
  width: 100px;
  margin-right: 5px;
}
.checkbox.is-bordered.is-checked {
  background-color: #409eff;
}
//多选框选中的默认字体颜色
.checkboxClass {
  color: #fff;
}
//隐藏了多选框的勾选框
// .el-checkbox__inner {
//   display: none;
// }
//多选框的默认字体颜色
.checkboxClassDefault {
  color: #606266;
}
.span {
  color: #fff;
}
</style>
